{extend name="common/base"/}
{block name="style"}
<style>
.upbookcover {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3rem;
    text-align: center;
}
</style>
{/block}

<!-- 主体 -->
{block name="body"}
	{include file="common/header" nav='info' /}
    <!-- Popup CSS -->
    <link href="{__STATIC__}/author/css/magnific-popup.css" rel="stylesheet">
    <link href="{__STATIC__}/author/css/bootstrap-tagsinput.css" rel="stylesheet">
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">添加作品</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">                
                <li class="breadcrumb-item"><a href="{:url('user/index')}">作家中心</a></li>
                <li class="breadcrumb-item"><a href="{:url('book/index')}">作品列表</a></li>
                <li class="breadcrumb-item active">作品添加</li>
            </ol>
        </div>
    </div>
    <style>
        .upload-cover .file {
            position: relative;
            display: inline-block;
            border: 1px dashed #DEDEDE;
            border-radius: 4px;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #fff;
            vertical-align: top;
        }                                    
        .upload-cover .file input {
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            width: 60px;
            height: 60px;
        }                                    
        .upload-cover .file:hover {
            border: 1px dashed #3a75dc;
        }
    </style>
	<div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-xlg-3 col-md-5">
                <div class="card" id="image-popups">
                    <a href="{__STATIC__}/home/images/default_cover.png" data-effect="mfp-zoom-in"><img class="card-img bookcover" data-cover="" src="{__STATIC__}/home/images/default_cover.png"></a>          
                </div>
                <div class="card">
                    <div class="card-body">
                        <h4>上传封面</h4>
                        <div class="upload-cover">
                            <div class="file">
                                <i class="ti-plus"></i>
                                <input type="file" name="file" accept="image/*" id="uploadcover">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h4>封面说明</h4>
                        <p style="margin-bottom: 0;font-size: 90%;">提示：您可以上传自定义图片，如果没有自定义图片可以选择默认封面<br>
                            1.建议658X940像素，不超过10MB的JPG图片；<br>
                            2.图片应显示书名、笔名和站点；<br>
                            3.建议使用原创图片、不得使用真人照片及他人有版权的图片，以免引起纠纷；<br>
                            4.严禁上传色情、暴力、广告宣传或不适合公众观赏的图片，一经发现即做禁书处理；<br>
                            5.封面上传后，管理员将在2日内审核；
                        </p>                        
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-xlg-9 col-md-7">
                <div class="card">       
                    <div class="tab-content">
                        <div class="tab-pane active" id="settings" role="tabpanel">
                            <div class="card-body collapse show">
                                <form class="form" id="basic">
                                    <input type="hidden" name="cover" id="cover" value="">                        
                                    <div class="form-group">
                                        <label class="col-md-12">作品名称</label>
                                        <div class="col-md-12">
                                            <input type="text" name="title" placeholder="请输入作品名称，不超过20个字符，可使用中文标点。" maxlength="20" class="form-control" value="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-12">作品分类</label>
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <select name="genre" class="form-control custom-select" id="genre">
                                                        <option value="">请选择</option>
                                                        {volist name="$genre" id="v"}
                                                            <option value="{$v.id}">{$v.name}</option>
                                                        {/volist}
                                                    </select>
                                                </div>
                                                <div class="col-lg-6">
                                                    <select name="subgenre" class="form-control custom-select" id="subgenre">
                                                        <option value="">请选择</option>                                                        
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">作品简介</label>
                                        <div class="col-md-12">
                                            <textarea class="form-control" name="remark" id="remark" rows="10" maxlength="500"></textarea>
                                        </div>
                                        <label class="col-md-12">特别提示：<br>
                                            <code>20~500个字,禁止上传违反国家政策、色情、暴力,具有不良影响的内容.否则您的作品将会被强制下架.感谢您的配合!</code><br>
                                            <code>具体禁止创作内容如下，请作者们注意并遵守：</code><br>
                                            <code>（一）反对宪法确定的基本原则的；</code><br>
                                            <code>（二）危害国家统一、主权和领土完整的；</code><br>
                                            <code>（三）泄露国家秘密、危害国家安全或者损害国家荣誉和利益的；</code><br>
                                            <code>（四）煽动民族仇恨、民族歧视，破坏民族团结，或者侵害民族风俗、习惯的；</code><br>
                                            <code>（五）宣扬邪教、迷信的；</code><br>
                                            <code>（六）散布谣言，扰乱社会秩序，破坏社会稳定的；</code><br>
                                            <code>（七）宣扬淫秽、色情、赌博、暴力或者教唆犯罪的；</code><br>
                                            <code>（八）侮辱或者诽谤他人，侵害他人合法权益的；</code><br>
                                            <code>（九）危害社会公德或者民族优秀文化传统的；</code><br>
                                            <code>（十）有法律、行政法规和国家规定禁止的其他内容的。</code>
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-12 m-t-20">
                                            <h5>作品风格</h5>
                                            <hr>
                                            {volist name=":explode(',', $tags['style'])" id="v"}
                                                <input name="style" type="radio" id="{:trim($v)}" value="{:trim($v)}" class="with-gap radio-col-blue">
                                                <label for="{:trim($v)}">{:trim($v)}</label>
                                            {/volist}
                                        </div>
                                        <div class="col-md-12 m-t-20">
                                            <h5>作品结局</h5>
                                            <hr>
                                            {volist name=":explode(',', $tags['ending'])" id="v"}
                                                <input name="ending" type="radio" id="{:trim($v)}" value="{:trim($v)}" class="with-gap radio-col-blue">
                                                <label for="{:trim($v)}">{:trim($v)}</label>
                                            {/volist}
                                        </div>
                                        <div class="col-md-12 m-t-20">
                                            <h5>主角身份</h5>
                                            <hr>
                                            {volist name=":explode(',', $tags['identity'])" id="v"}
                                                <input name="identity" type="radio" id="{:trim($v)}" value="{:trim($v)}" class="with-gap radio-col-blue">
                                                <label for="{:trim($v)}">{:trim($v)}</label>
                                            {/volist}
                                        </div>
                                        <div class="col-md-12 m-t-20">
                                            <h5>主角形象</h5>
                                            <hr>
                                            {volist name=":explode(',', $tags['image'])" id="v"}
                                                <input name="image" type="radio" id="{:trim($v)}" value="{:trim($v)}" class="with-gap radio-col-blue">
                                                <label for="{:trim($v)}">{:trim($v)}</label>
                                            {/volist}
                                        </div>
                                        <div class="col-md-12 m-t-20">
                                            <h5>作品流派</h5>
                                            <hr>
                                            {volist name=":explode(',', $tags['schools'])" id="v"}
                                                <input name="schools" type="radio" id="{:trim($v)}" value="{:trim($v)}" class="with-gap radio-col-blue">
                                                <label for="{:trim($v)}">{:trim($v)}</label>
                                            {/volist}
                                        </div>
                                        <div class="col-md-12 m-t-20">
                                            <h5>故事元素</h5>
                                            <hr>
                                            {volist name=":explode(',', $tags['element'])" id="v"}
                                                <input name="element" type="radio" id="{:trim($v)}" value="{:trim($v)}" class="with-gap radio-col-blue">
                                                <label for="{:trim($v)}">{:trim($v)}</label>
                                            {/volist}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">自定义作品标签</label>
                                        <div class="col-md-12">
                                            <div class="tags-default">
                                                <input type="text" value="" data-role="tagsinput" name="label_custom" id="label_custom" placeholder="添加标签">
                                            </div>
                                        </div>
                                        <label class="col-md-12">特别提示：<code>添加标签以回车键或TAB键应用,否则将不会有效。</code></label>        
                                    </div>
                                    
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <button type="button" class="btn btn-success waves-effect waves-light m-r-10" id="booksave">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<!-- Magnific popup JavaScript -->
<script src="{__STATIC__}/author/js/jquery.magnific-popup.min.js"></script>
<!-- ============================================================== -->
<script src="{__STATIC__}/author/js/bootstrap-tagsinput.min.js"></script>
<script>
$(window).on('load', function() {
    //图片上传
    $('#uploadcover').on('change', function(e) {
        var obj = this;      
        var imgSize = this.files[0].size;
        if (imgSize > 1024 * 1024 * 10) { //1M
            return layer.msg("上传图片不能超过10MB");
        };
        if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
            return layer.msg("图片上传格式不正确");
        }
        var imgFile = this.files[0];
        var formFile = new FormData();
        formFile.append('file', imgFile);
        $.ajax({
            url: "{:url('api/upload')}",
            type: 'POST',
            data: formFile,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            // traditional:true,
            dataType:'json',
            success: function(res) {
                console.log(res);
                if(res.code == 0) {
                    obj.value = '';
                    $(".bookcover").attr('src', res.data.filepath).parent().attr("href", res.data.filepath);
                    $("#cover").val(res.data.filepath);
                } else {
                    obj.value = '';
                    layer.msg(res.msg);
                }
            }
        });
    });

    //建立可存取到file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    };

    //保存
    $("#booksave").bind("click", function() {        
        var labels = []; // 存放结果的数组
        $(".bootstrap-tagsinput span").each(function() {
            var value = $(this).text(); // 获取当前元素的值
            if(value) {
                labels.push(value); // 将值添加到数组中
            }
        });
        var param = $('#basic').serialize() + '&label_custom=' + labels.join(',');
        if($("#remark").val().length < 20) {
            layer.msg('作品简介不能低于20字！', {icon: 5});
            return false;
        }
        $.ajax({
            url: "{:url('book/add')}",
            data: param,
            type: 'post',
            async: false,
            success: function (res) {                    
                if (res.code === 0) {
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.href="{:url('book/index')}";
                    }, 1500);
                } else {
                    layer.msg(res.msg);
                }
            }
        })
    });

    //大类事件
    $("#genre").bind("change", function() {
        var pid = $(this).val();
        if(pid) {
            $.ajax({
                url: "{:url('book/getsmallcate')}",
                data: {pid: pid},
                type: 'post',
                async: false,
                success: function (res) {                    
                    if (res.code === 0) {
                        $("#subgenre").empty();
                        var options = '<option value="">请选择</option>'
                        for (const key in res.data) {
                            options += '<option value="' + res.data[key].id + '">' + res.data[key].name + '</option>';		
                        }
                        $("#subgenre").append(options);
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
        }
    });

    //图片弹窗预览
    $('#image-popups').magnificPopup({
		  delegate: 'a',
		  type: 'image',
		  removalDelay: 500,
		  callbacks: {
		    beforeOpen: function() {
		       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
		       this.st.mainClass = this.st.el.attr('data-effect');
		    }
		  },
		  closeOnContentClick: true,
		  midClick: true
	});

    //恢复默认封面图
    $('.default-cover img').on('click', function () {
        $(".bookcover").attr('src', $(this).attr('src')).parent().attr("href", $(this).attr('src'));
        $("#cover").val($(this).attr('src'));
    })
});
</script>
{/block}
<!-- /脚本 -->